<template>
    <div class="system-offer-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <el-card shadow="hover" class="layout-padding-auto">
                <div class="table-search-container">
                    <el-form ref="tableSearchRef" :model="state.ruleForm" size="default" label-width="100px" class="table-form">
                        <el-row>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                                <el-form-item label="账户地址">
                                    <el-input v-model="state.ruleForm.address" style="width: 100%" placeholder="账户地址"></el-input>
                                </el-form-item>
                            </el-col>


                            <!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                                <el-form-item label="系统地址">
                                    <el-select v-model="state.ruleForm.address" placeholder="系统地址" clearable
                                        style="width: 100%">
                                        <el-option v-for="i in state.systemAddressList" :key="i.address" :value="i.address"
                                            :label="i.addressTypeName + '[' + i.address + ']'">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col> -->


                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" >
                                <el-form-item label="操作类型">
                                    <el-select v-model="state.ruleForm.tradeType" placeholder="请选择" clearable style="width: 100%">
                                        <el-option v-for="i in state.typeList" :key="i.type" :label="i.name" :value="i.type">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="3" class="mb20" >
                                <el-form-item label="其它属性">
                                    <el-select v-model="state.ruleForm.remark.name" placeholder="请选择" clearable style="width: 100%">
                                        <el-option v-for="i in state.payRemarkList" :key="i.code" :label="i.name" :value="i.code">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" >
                                <el-form-item label="=">
                                    <el-input v-model="state.ruleForm.remark.value"></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                                <el-form-item label="资金类型类型">
                                    <el-select v-model="state.ruleForm.detailType" placeholder="请选择" clearable style="width: 100%">
                                        <el-option label="收益" value="income"></el-option>
                                        <el-option label="支付" value="pay"></el-option>
                                        <el-option label="冻结" value="freeze"></el-option>
                                        <el-option label="解冻" value="unfreeze"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
                                <el-form-item label="币种">
                                    <el-select v-model="state.ruleForm.coinId" placeholder="请选择" clearable style="width: 100%">
                                        <el-option v-for="i in state.coinList" :key="i.coinId" :value="i.coinId" :label="i.coinSymbol">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="12" :md="9" :lg="7" :xl="5" class="mb20" v-show="state.isToggle">
                                <el-form-item label="创建时间">
                                    <el-date-picker v-model="state.ruleForm.createDate" type="datetimerange" :picker-options="state.pickerOptions"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" style="width: 100%">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                                <el-form-item class="table-form-btn" :label-width="!state.isToggle ? '10px' : '35px'">
                                    <div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
                                        <span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
                                        <SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
                                    </div>
                                    <div>
                                        <el-button size="default" type="primary" @click="refresh()">查询
                                        </el-button>
                                        <el-button size="default" type="info" class="ml10" @click="handleResetSearch()"> 重置
                                        </el-button>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>


                <el-table :default-sort="{ prop: 'CREATED_DATE', order: 'descending' }" size="default" :data="state.dataList" style="width: 100%" border=""
                    @sort-change="onSortHandler">

                    <el-table-column align="center" label="id" width="80" :show-overflow-tooltip="true">
                        <template #default="scope">
                            <span>{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>



                    <el-table-column align="center" label="批次号" width="160" :show-overflow-tooltip="true">
                        <template #default="scope">
                            <span>{{ scope.row.batchId }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="资金地址" width="160" :show-overflow-tooltip="true">
                        <template #default="scope">
                            <span>{{ scope.row.address }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="币种" width="100">
                        <template #default="scope">
                            <span>{{ scope.row.coinSymbol }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作金额" width="160">
                        <template #default="scope">
                            <span>
                                {{ (scope.row.detailType == 'income' || scope.row.detailType == 'detailType') ? "+" : "-" }} {{
                        scope.row.paymentAmount }} {{ scope.row.coinSymbol }}
                            </span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作前金额" width="160">
                        <template #default="scope">
                            <span>{{ scope.row.paymentBalance }} {{ scope.row.coinSymbol }}
                            </span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作前冻结" width="160">
                        <template #default="scope">
                            <span>{{ scope.row.paymentFreeze }} {{ scope.row.coinSymbol }}
                            </span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作类型" width="160">
                        <template #default="scope">
                            <span>{{ scope.row.tradeTypeStr }} </span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="资金类型" width="160">
                        <template #default="scope">
                            <span v-if="scope.row.detailType == 'income'"> 收益</span>
                            <span v-if="scope.row.detailType == 'pay'"> 支付</span>
                            <span v-if="scope.row.detailType == 'freeze'"> 冻结</span>
                            <span v-if="scope.row.detailType == 'unfreeze'"> 解冻</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="关联地址" width="160" :show-overflow-tooltip="true">
                        <template #default="scope">
                            <span>{{ scope.row.refAddress }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="备注" width="160" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.paymentRemark || "-" }} </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="app是否显示" width="160">
                        <template #default="scope">
                            <span>{{ scope.row.showType == 1 ? "显示" : "隐藏" }} </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="创建时间" width="160">
                        <template #default="scope">
                            <span>{{ formatDate2(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[20, 50, 100]"
                v-model:current-page="state.page" background v-model:page-size="state.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="state.total">
            </el-pagination>
        </el-card>

    </div>
</template>

<script setup lang="ts" name="systemMenu">
import { formatDate } from '/@/utils/formatTime';
import { onMounted, reactive, defineAsyncComponent, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';




import { useFundApi } from '/@/api/fund/index'






const state = reactive({
    sorts: {} as any,
    isToggle: false,
    page: 1,
    limit: 20,
    total: 0,
    typeList: [] as any,
    dataList: [] as any,
    coinList: [] as any,
    payRemarkList: [] as any,
    systemTypeSelect: [] as any,// 系统账户类型
    ruleForm: {
        address: "",
        status: "",
        tradeType: "",
        detailType: "",
        coinId: "",
        batchId: "",
        createDate: [],
        remark: {
            name: "",
            value: "",
        }
    },
    pickerOptions: {
        shortcuts: [
            {
                text: "最近一周",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 7
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近一个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 30
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近三个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 90
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
        ],
    },
    systemAddressList: [] as any

});


const refresh = () => {
    queryAccountDetail();
}



const handleResetSearch = () => {
    state.ruleForm = {
        address: "",
        status: "",
        tradeType: "",
        detailType: "",
        coinId: "",     
        batchId: "",
        remark: {
            name: "",
            value: "",
        },
        createDate: []
    };
    state.page = 1;
    state.limit = 20;
    queryAccountDetail();
}


const formatDate2 = (str: any) => {
    if (!str) return "-";
    return formatDate(new Date(str), "YYYY-mm-dd HH:MM")
}


// 分页改变
const onHandleSizeChange = (val: number) => {
    state.limit = val;
    queryAccountDetail();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.page = val;
    queryAccountDetail();
};


const queryAccountDetail = async () => {
    let vo = {
        page: state.page,
        limit: state.limit
    } as any;


    if (state.ruleForm.address) vo["address"] = state.ruleForm.address;
    if (state.ruleForm.status) vo["status"] = state.ruleForm.status;
    if (state.ruleForm.coinId) vo["coinId"] = state.ruleForm.coinId;
    if (state.ruleForm.tradeType) vo["paymentType"] = state.ruleForm.tradeType;
    if (state.ruleForm.batchId) vo["batchId"] = state.ruleForm.batchId;
    if (state.ruleForm.detailType) vo["detailType"] = state.ruleForm.detailType;
    if (state.ruleForm.remark.name && state.ruleForm.remark.value){
        vo["remarkQuery.name"] = state.ruleForm.remark.name;
        vo["remarkQuery.value"] = state.ruleForm.remark.value;
    } 


    if (state.ruleForm.createDate.length > 0) {
        vo["createTime"] = [formatDate(new Date(state.ruleForm.createDate[0]), "YYYY-mm-dd HH:MM:SS"), formatDate(new Date(state.ruleForm.createDate[1]), "YYYY-mm-dd HH:MM:SS")].join();
    }



    // if (sortsStr()) vo["sorts"] = sortsStr();

    let listTemp = await useFundApi().queryAccountDetail(vo);





    let tempList = [] as any;
    // let obj = {
    //     "-5": "审核不通过",
    //     "-30": "错误",
    //     5: "审核中",
    //     10: "结算中",
    //     20: "完成",
    //     40: "待确认",
    // };

    listTemp.list.forEach((element: any) => {
        state.typeList.forEach((el: any) => {
            if (el.type == element.paymentType) {
                element.tradeTypeStr = el.name || "--";
                // element.statusStr = obj[element.status.toString()] || "--";
            }
        });
        // element.amount = element.amount + " " + element.coinSymbol;
        tempList.push(element);
    });

    state.dataList = tempList;
    state.total = listTemp.total;
}


const querySystemAddress = async () => {
    let listTemp = await useFundApi().querySystemAddress({ page: 1, limit: 200 });
    state.systemAddressList = listTemp.list;
}


const getcoinList = async () => {
    let listTemp = await useFundApi().getcoinList();
    state.coinList = listTemp;
}



const getTradeTypes = async () => {
    let listTemp = await useFundApi().getTradeTypes();
    state.typeList = listTemp;
    listTemp = await useFundApi().getPaymentRemark();
    state.payRemarkList = listTemp;

}


const sortsStr = () => {
    let result = "";
    for (var prop in state.sorts) {
        result += prop + (state.sorts[prop] == "descending" ? " desc," : " asc,")
    }
    if (result == "") {
        return null;
    }
    return result.substring(0, result.length - 1)
}

const onSortHandler = (args: any) => {
    console.log(args)
    if (args.order) {
        state.sorts[args.prop] = args.order;
    } else {
        delete state.sorts[args.prop];
    }
    queryAccountDetail();
}



// 页面加载时
onMounted(() => {
    getTradeTypes();
    getcoinList();
    // querySystemAddress();
    onSortHandler({ prop: "CREATED_DATE", order: "descending" });
    // queryAccountDetail();
});





</script>



<style scoped lang="scss">
.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}

.system-offer-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}


.table-search-container {
    display: flex;

    .table-form {
        flex: 1;

        .table-form-btn-toggle {
            white-space: nowrap;
            user-select: none;
            display: flex;
            align-items: center;
            color: var(--el-color-primary);
            margin-right: 15px;
        }
    }
}
</style>
